<template>
    <!-- 页面容器 -->
    <div class="container">
        <!-- 顶部导航栏 -->
        <div class="nav" v-if="nav_show">
            <!-- <i class="el-icon-back"></i>
            <i class="el-icon-plus"></i> -->
            <div class="title">{{film.title}}</div>
        </div>
        <!-- 电影内容 -->
        <div class="content">
            <!-- 封面图 -->
            <div class="cover">
                <img :src="film.pic" alt="">
            </div>

            <!-- 口号 -->
            <div class="slogo">{{film.slogo}}</div>
        </div>
    </div>
</template>

<script setup>

import { onMounted, ref, computed ,onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import axios from 'axios'
// import { Edit,Share } from "@element-plus/icons-vue"
const $route = useRoute()


const film = ref({})
onMounted(() => {
    // 第三步:使用$route.params.id拿到路由传递的id
    // console.log($route.params.name);
    axios.get('http://122.112.161.135:8000/movieDetail',{
        params:{
            title:$route.params.name
        }
        
    }).then(res => {
     
        film.value = res.data.result
        console.log(film.value);

    })
})


// 滚动显示
let nav_show = ref(false)


function handleScroll() {
    
  	  // 页面滑动的距离
      let scrollTop = document.documentElement.scrollTop
      console.log(scrollTop);
      // 当页面滑动的距离大于300px时元素显示，否则不显示
      if (scrollTop >= 30) {
        nav_show.value = true
      } else {
        nav_show.value = false
      }
    }

    onMounted (() => {
        window.addEventListener('scroll', handleScroll)
    })

    onUnmounted(()=>{
        window.removeEventListener('scroll', handleScroll)
    })

</script>

<style scoped>
/* 页面容器 */
.container {
    width: 800px;
    height: 1000px;
    /* background-color: pink; */
    margin: 0 auto;

}

/* 顶部导航栏 */
.container .nav {
    display: flex;
    position:fixed;
    top: 0;
    left: 0;

    justify-content: center;
    align-items: center;
    width: 100%;
    height: 50px;
    background-color: blueviolet;
    margin-bottom: 20px;
}

.container .nav .title {
    color: #fff;
}

/* 文章内容 */
.container .content {
    display: flex;
    flex-direction: column;
    width: 40%;
    height: 500px;
    /* background-color: seagreen; */
    margin: 0 auto;
   
}

.container .content .cover {
    flex: 8;
    width: 100%;

    background-color: pink;
}

.content .cover img {
    width: 100%;
    height: 100%;
}

.container .content .slogo {
    flex: 1;
    width: 100%;

    /* background-color: skyblue; */

    text-align: center;
    line-height: 55px;
    font-size: 14px;
}
</style>